<template>
  <div class="Slider">
    <slider animation="normal" v-model="sliderIndex" :autoplay="auto" :interval="5000" :control-btn="false" style="height: 485px;">
      <!-- list:父组件传入的轮播图样式列表(宽高图片地址等) auto是否自动播放 -->
      <slider-item
        v-for="(i, index) in list"  
        :key="index"
        :style="i"  
      >
      <img :src="i.src" alt="">
      <div class="box">
        <div class="price">{{i.price}}</div>
        <div class="info">
          <p class="num"><b>{{index + 1}}</b>/{{list.length}}</p>
          <p class="info">{{i.name}}</p>
         </div>
      </div>
      </slider-item>
    </slider>
  </div>
</template>
<script>
import { Slider, SliderItem } from 'vue-easy-slider'
export default{
  props: ['list','auto'],
  name: '',
  data () {
    return {
      sliderIndex:1
    }
  }
}
</script>
<style scoped lang="less">
  .Slider{
    img{
      width: 100%;
      height: 100%;
    }
    .box{
      width: 92%;
      margin: auto;
      div.price{
        font-size: 0.8em;
        text-align: right;
      }
      div.info{
        p.num{
          float: left;
          margin: 0;
        }
        p.info{
          float: right;
          margin: 0;
          font-size: 0.8em;
          color: #666;
        }
      }
    }
  }
</style>